<style scoped lang="scss">
.dialog__body {
  background-color: #f3f3fa;
  border: 1px solid #bbbbbb;
  height: 55vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.button-group {
  margin: 20px 0 0 10px;
  display: flex;
  justify-content: flex-end;

  &__info {
    margin-right: 10px;
  }
}

.tab-group {
  margin: 10px 0 0 0;
  height: 100%;

  ::v-deep .el-aside {
    padding: 10px 0 0 10px;
  }

  ::v-deep .el-input {
    padding-bottom: 10px;
  }

  ::v-deep .el-tree {
    height: var(--tree-height);
    overflow-y: auto;
  }

  ::v-deep .el-main {
    padding: 10px 10px 0 10px;
  }
}

::v-deep .el-table th.is-leaf {
  background-color: #ffffff !important;
}

.button-group__footer {
  display: flex;
  flex-direction: row-reverse;
  margin: 20px 10px 10px 0;
  //position: absolute;
  //bottom: 5px;
  //right: 0;
  &__cancel {
    margin: 0 0 0 10px;
  }
}
</style>
<template>
  <div class="dialog__body">
    <div class="button-group">
      <el-popover
        placement="right"
        title="数据去重"
        width="200"
        trigger="click"
      >
        <div>根据条件去除重复数据</div>
        <mine-button slot="reference" type="primary" class="button-group__info"
          ><i class="iconfont icon-help-circle-line"></i>说明</mine-button
        >
      </el-popover>
    </div>
    <div class="tab-group">
      <el-container>
        <el-aside width="200px">
          <el-input
            placeholder="请输入字段名"
            suffix-icon="el-icon-search"
            v-model="searchInput"
          >
          </el-input>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :style="cssVars"
          ></el-tree>
        </el-aside>
        <el-main>
          <el-table
            class="table border-table"
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            :height="tableHeight"
            :header-cell-style="{ 'text-align': 'center' }"
            ref="multipleTable"
          >
            <el-table-column label="字段名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="注释名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="移除" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <!--                    <mine-pagination-->
          <!--                        @numberChange="numberChange"-->
          <!--                        :total="total"-->
          <!--                        :page-size="pageSize"-->
          <!--                        :current-page="currentPage">-->
          <!--                    </mine-pagination>-->
        </el-main>
      </el-container>
    </div>
    <div class="button-group__footer">
      <mine-button type="primary" secondary class="button-group__footer__cancel"
        >取消</mine-button
      >
      <mine-button type="primary">确定</mine-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Deduplication",
  data() {
    return {
      loading: false,
      tableData: [],
      searchInput: "",
      data: [
        {
          label: "一级 1",
        },
        {
          label: "一级 2",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {
    tableHeight: function () {
      return 0.4 * window.innerHeight + "px";
    },
    cssVars() {
      return {
        "--tree-height": 0.4 * window.innerHeight - 50 + "px",
      };
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>
